<template>
	<div>
		<div class="print-container">
			<LoadList :loading="loading" :noMore="noMore" :containerHeight="containerHeight" @load-more="loadMore">
				<div class="payment-methods-card">
					<template v-if="printerData && printerData.printer_ls && printerData.printer_ls.length > 0">
						<div v-for="(method, index) in printerData.printer_ls" :key="index" class="payment-method-item">
							<div class="payment-methods-cell flex_between" v-if="method.paytype != 'wxntv'">
								<div class="method-info flex_between">
									<div class="flex1" @click="printDetail(method)">
										<div class="flex_row">
											<div class="method-name font_bule under-line">{{ method.title }}</div>
											<el-tag type="success" size="mini" class="ml10" v-if="method.type_name">{{
												method.type_name }}</el-tag>
										</div>
										<div class="ellipsis font_black7 font_size14" style="max-width:800px;">
											{{ method.idyun_name || '--' }}
										</div>
									</div>
								</div>
								<div class="payment-actions">
									<div class="custom-checkbox" :class="{
										'checkbox-checked': method.status == 1
									}">
										<i v-if="method.status == 1" class="el-icon-check"></i>
									</div>
								</div>
							</div>
						</div>
					</template>
					<template v-else>
						<el-empty></el-empty>
					</template>
				</div>
			</LoadList>
		</div>
		<!-- 打印机弹窗 -->
		<printDialog ref="printDialoRef" :printerData="printerData" @success-handle="getPrinterLs" />
		<!-- 预览弹窗 -->
		<printViewDialog ref="printViewDialogRef" />
	</div>
</template>

<script setup>
import { ref, onMounted, defineExpose, computed, defineProps, getCurrentInstance } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import LoadList from '@/components/commV2/LoadList/index.vue'
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import printDialog from './printDialog.vue'
import printViewDialog from './printViewDialog.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const { stateHooks } = useCommonHooks()

const loading = ref(false)
const noMore = ref(false)
const containerHeight = ref(stateHooks.leftHeight - 70)
const printerData = ref({})

// 加载更多
const loadMore = () => {
	console.log('加载更多')
}

// 预览
const printViewDialogRef = ref(null)
const printView = (item) => {
	// if (printViewDialogRef.value) {
	// 	printViewDialogRef.value.show(item)
	// }
}

// 获取打印机列表
const getPrinterLs = async () => {
	try {
		loading.value = true
		let res = await proxy.$api({ url: config.compset_printer_ls, data: {} })
		let result = res.data || {}
		if (res.status == 1) {
			printerData.value = result || {}
		}
	} catch (error) {
	} finally {
		loading.value = false
	}
}

const printDialoRef = ref(null)
const handleAdd = () => {
	if (printDialoRef.value) {
		printDialoRef.value.show({ type: 'add' })
	}
}

// 切换打印机状态
const printDetail = async (item) => {
	try {
		let res = await proxy.$api({ url: config.compset_printer_info, data: { id: item.id } })
		if (res.status == 1) {
			let data = res?.data?.printer_info || {}
			data.ch = data.ch ? data.ch.split(',') : []
			data.shopid_yds = data.shopid_yds ? data.shopid_yds.split(',') : []
			data.shopids = data.shopids ? data.shopids.split(',') : []
			data.storeids = data.storeids ? data.storeids.split(',') : []
			data.status = Number(data.status)
			printDialoRef.value.show({ type: 'edt', infoData: data })
		}
	} catch (error) {
	}
}

// 初始加载数据
onMounted(() => {
	getPrinterLs()
})

defineExpose({
	handleAdd
})


</script>

<style scoped lang="scss">
.payment-methods-card {
	overflow: hidden;
	margin-bottom: 16px;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.payment-methods-cell {
	flex: 1;
	padding: 14px 10px;
	border-bottom: 1px solid #f0f2f5;
	transition: background-color 0.2s ease;
	background-color: #fff;
}

.payment-method-item {
	border-radius: 0;

	&:last-child {
		border-bottom: none;
	}

	&:first-child .payment-methods-cell {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	&:last-child .payment-methods-cell {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}

.payment-actions {
	width: 40px;
}

.method-info {
	flex: 1;
	cursor: pointer;
	box-sizing: border-box;
}

.method-name {
	font-size: 18px;
	font-weight: 500;
	color: #303133;
}

.custom-checkbox {
	.el-icon-check {
		font-size: 24px;
		color: #69a7ff;
	}
}
</style>